﻿<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>设定DIV块的放射状色彩渐变</title>
<style type="text/css">
body{
        background-color:rgb(255,255,204);
}
div {
	margin-top: 10px;
	margin-left: 20px;
	padding: 3px;
	width: 450px;
	height:200px;
        color: white;
}
div.in2 {
	width: 100%;
	height:100%;
        display:box;
        display:-webkit-box;
        display:-moz-box;
}

#test1 {
background:radial-gradient(left bottom, circle cover,#0000ff 50px, #ff0000 150px);
background:-webkit-gradient(radial, left bottom, 50, left bottom,150,from(#0000ff), to(#ff0000));
background:-moz-radial-gradient(left bottom, circle cover,#0000ff 50px, #ff0000 150px);
}
#test2 {
background:radial-gradient(circle closest-side,#0000ff, #ff0000);
background:-webkit-gradient(radial, 50% 50%, 0,  50% 50%, 70, from(#0000ff), to(#ff0000));
background:-moz-radial-gradient(circle closest-side,#0000ff, #ff0000);
}
#test3 {
background:radial-gradient(center center,circle,#080,#ff0,#f00);
background:-webkit-radial-gradient(center center,circle,#080,#ff0,#f00);
background:-moz-radial-gradient(center center,circle,#080,#ff0,#f00);
}
#test4 {
background:radial-gradient(circle contain,#f0f,#ff0,#00f);
background:-webkit-radial-gradient(circle contain,#f0f,#ff0,#00f);
background:-moz-radial-gradient(circle contain,#f0f,#ff0,#00f);
}
</style>
</head>
<body>
<div class="in2">
<div id="test1">test1</div>
<div id="test2">test2</div>
</div>
<div class="in2">
<div id="test3">test3</div>
<div id="test4">test4</div>
</div>
</body>
</html>

